{% extends 'common/edit_layout.html' %}
{% block content %}
    <div class="layui-card-body">
        <form class="layui-form" novalidate id="negotiation_form"
              lay-filter="negotiation_form" method="post" enctype="multipart/form-data">
            <div class="layui-row">

                <!-- 基础信息-->
                {% for field in form %}

                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            {% if field.field.required %}
                                <span style="color: red">{{ field.errors.0 }}</span>
                                <label class="layui-form-label label-required-next">
                                    {{ field.label }}</label>
                            {% else %}
                                <label class="layui-form-label">
                                    {{ field.label }}</label>
                            {% endif %}
                            <div class="layui-input-block">
                                {% if field.name == 'images' %}
                                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                                        <i class="layui-icon layui-icon-upload"></i> 单图片上传
                                    </button>
                                    <div style="width: 132px;">
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="ID-upload-demo-img"
                                                 style="width: 100%; height: 92px;">
                                            <div id="ID-upload-demo-text"></div>
                                        </div>
                                        <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                                             lay-filter="filter-demo">
                                            <div class="layui-progress-bar" lay-percent=""></div>
                                        </div>
                                    </div>
                                    <div style="display: none" id="label_id_images">
                                        {{ field }}
                                    </div>
                                {% else %}
                                    {{ field }}

                                {% endif %}
                            </div>
                        </div>
                    </div>

                {% endfor %}

            </div>

            <div style='margin:20px; '>
                <button class="layui-btn custom-button" lay-submit lay-filter="negotiation_add">确定</button>
            </div>
        </form>
    </div>

{% endblock %}
{% block js %}

    <script>

        layui.use(function () {
            var layer = layui.layer;
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            var image_url = '';
            var start_url = document.querySelector('#label_id_images a').href.split('/media')[0]
            console.log(start_url,'==start_url==')

            value = document.querySelector('#label_id_images a').href
            if (value) {
                console.log('=====value', value)
                document.getElementById('ID-upload-demo-img').src = value;
            }

            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '{% url 'manager:上传' %}', // 实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8

                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function (res) {
                    // 若上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    image_url = res.data.url;
                    console.log(image_url,'==上传的图片路径==')
                    console.log('====上传成功===', res);
                    document.querySelector('#label_id_images a').href = res.data.url;
                    document.querySelector('#label_id_images a').textContent = res.data.url;
                    // document.querySelector('#id_images').value = res.data.url;  // 更新表单字段的值

                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });



            {% for msg in messages %}
                var iconValue = "{{msg.tags}}" == 'success' ? 1 : 2;
                document.querySelector('#ID-upload-demo-img').src =start_url+ image_url; // 更新上传后的图片预览
                console.log('====上传成功===', start_url, image_url);
                layer.msg(
                    '{{ msg }}',
                    {icon: iconValue, time: 2000},
                    function () {
                        //关闭弹窗
                        setTimeout("window.parent.location.reload();", 0)
                    }
                );
            {% endfor %}

        })
    </script>

{% endblock %}